<!DOCTYPE html>
<html>

<head>
    <meta name="keywords" content="天地图" charset="utf-8" />
    <title>天地图－轨迹回放</title>
    <script language="javascript" src="http://api.tianditu.com/js/maps.js"></script>
</head>

<body>
    <button type="button" onclick="goRun()">Click Me!</button>
    <br/>
    <div id="mapDiv" style="position:absolute;width:100%; height:90%"></div>
</body>
<script language="javascript">
    var map, zoom = 11, points, line;
    var myIcon = new TIcon("http://api.tianditu.com/img/map/markerA.png", new TSize(19, 27), { anchor: new TPixel(9, 27) });
    //初始化地图对象 
    map = new TMap("mapDiv");
    map.enableHandleMouseScroll();
    //设置显示地图的中心点和级别 
    map.centerAndZoom(new TLngLat(116.403694, 39.91582), zoom);

    points = [];
    points.push(new TLngLat(116.306533, 39.890581));
    points.push(new TLngLat(116.403694, 39.91582));
    points.push(new TLngLat(116.475558, 39.962733));
    points.push(new TLngLat(116.555472, 39.916706));
    points.push(new TLngLat(116.529025, 39.869762));

    function goRun() {
        var pts = points;    //通过驾车实例，获得一系列点的数组
        var paths = pts.length;    //获得有几个点
        var carMk = new TMarker(pts[0], { icon: myIcon });//地图添加自定义标识
        points = [pts[0], pts[1]];
        line = new TPolyline(points, { strokeColor: "red", strokeWeight: 3, strokeOpacity: 0.5 }); //创建线对象
        map.addOverLay(carMk);
        map.addOverLay(line); //添加到地图中
        carMk.setLngLat(pts[1]);
        function resetMkPoint(i) {
            carMk.setLngLat(pts[i]);
            points = [pts[i - 1], pts[i]];
            line = new TPolyline(points, { strokeColor: "red", strokeWeight: 3, strokeOpacity: 0.5 }); //创建线对象
            map.addOverLay(line); //添加到地图中
            if (i < paths) {
                setTimeout(function () {
                    i++;
                    resetMkPoint(i);
                }, 500);
            }
        }
        setTimeout(function () {
            resetMkPoint(2);
        }, 500)

    }

</script>

</html>